<template>
  <div>
    <h2>项目视频<span class="title-tips">（上传之后，请点击保存）</span></h2>
    <div class="header">
      <el-button  type="primary" @click="showAddDailog">上传视频</el-button>
      <el-button type="primary" v-if="!chose && list.length>0" @click="choseSome">选择</el-button>
      <el-button type="primary" v-if="chose" @click="deleSome">删除</el-button>
      <el-button  v-if="chose" @click="chose = false">取消</el-button>
    </div>
    <div class="content">
      <div style="margin: 20px; position: relative" v-for="(item, index) in list"  :key="index">
          <video
          style="width: 200px; height: 150px"
          controls="controls"
          :poster="item.bannerUrl"
          :src= "item.fullUrl">
          您的浏览器不支持视频播放
          </video>
         <el-input
          class="text-input"
          type="textarea"
          :rows="2"
          maxlength="100"
          placeholder="请填写视频描述"
          v-model="item.vedioInfo">
        </el-input>
        <div class="set-item">
          <el-select v-model="item.type" placeholder="请选择">
               <el-option
                 v-for="item in picList"
                 :key="item.dictValue"
                 :label="item.dictLabel"
                 :value="item.dictValue">
               </el-option>
           </el-select>
        </div>
        <div class="chose-item" @click="choseDele(item,index)" v-if="chose">
            <div :class="item.check? 'checkoed':'checkoed-not'">
                <i class="el-icon-check"></i>
            </div>
        </div>
      </div>
    </div>

    <!-- :file-list="dialogList" -->
    <el-dialog
    title="添加视频"
    :visible.sync="showDialog"
    width="50%"
    center>
     <div class="dialog-content">
       <el-upload
         class="upload-demo"
         drag
         :file-list="filelist"
         :on-success="upLoadSeccess"
         :on-remove="upLoadRemove"
         :before-upload="beforeUploadVideo"
         :data="{filetype:'海外项目视频',app:'shulan',module:'1',sourceKey:'1'}"
         :accept="'video/*'"
         :action="uploadVideoUrl"
         >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip" slot="tip">.mp4单个文件不能超过10M</div>
        </el-upload>
     </div>
     <div class="footer">
       <el-button @click="showDialog = false">取 消</el-button>
       <el-button type="primary" @click="dialogAdd">确 定</el-button>
     </div>
  </el-dialog>
    <el-button  type="primary" @click="addBanner" class="save-button">保存</el-button>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import {
    saveBanner,
    getBannerList,
    uploadImgUrl,
    uploadVideoUrl
} from '@/api/overseas'
export default {
  props: {
    communityId: {
      type: String
    },
  },
  components: {

  },
  data() {
    return {
      uploadImgUrl,
      uploadVideoUrl,
      filelist:[],
      chose: false,
      picList:[],
      list:[],
      showDialog: false,
      dialogList:[],
      file:uploadImgUrl
    };
  },
  watch: {
    // picList: {
    //   handler(n,o){
    //     this.$emit('getIsSave',false);
    //   },
    //   deep: true  // 可以深度检测到 person 对象的属性值的变化
    // }
  },
  mounted(){
    this.loading = this.$loading({
         lock: true,
         text: 'Loading',
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getDicts("overseas_video").then(response => {
        this.picList = response.data
    });
    this.getBannerList()
  },
  methods: {
    deleSome(){
      let reaDele = this.list.filter(item=>item.check)
      if(reaDele.length==0){
        this.$message({
          message: '请选择需要删除的视频',
          type: 'warning'
        });
        return
      }
      this.$confirm('确定删除已选中的视频, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.list = this.list.filter(item=>!item.check)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
    },
    choseDele(item, index){
      let currentCheck = this.list[index].check;
      this.$set(this.list[index],"check", !currentCheck)
    },
    choseSome(){
      this.chose = true
    },
    getBannerList(){
      getBannerList(this.communityId).then(res => {
          let filterList = res.data.filter(item=>item.bannerType==3)
          this.list = filterList.map(item => {
            return {
              ...item,
              fullUrl:uploadImgUrl+item.videoPicUrl+".mp4",
              // videoPicUrl:item.videoPicUrl,
              // bannerUrl:uploadImgUrl+item.videoPicId
            }
          })
          console.log('this.list', this.list);
          this.loading&&this.loading.close();
      })
    },
    addBanner(){
      console.log(this.list);
      let list = this.list
      if(list.length>0){
        // this.$message({
        //   type: 'info',
        //   message: '请上传视频'
        // });
        // return
        for (var i = 0; i < list.length; i++) {
           if(!list[i].type){
             this.$message({
               type: 'info',
               message: '请选择视频类型'
             });
             return
           }
           list[i].cover = i + 1;
        }
      }
      let params = {
        communityId: this.communityId,
        bannerType: 3,
        bannerList: list
      }
      saveBanner(params).then(res => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.getBannerList();
        // 维护状态更新
        this.$emit('updateReadyStatus');
      })
    },

    showAddDailog(){
      this.dialogList = []
      this.showDialog = true
      this.filelist = []
    },
    upLoadSeccess(e){
      console.log(12365,e);
      // ileExtension: "PNG"
      // fileType: "海外项目视频"
      // filename: "1204712.png"
      // id: "76df200306ef4117a568549bcea624df"
      // videoPicId: null
      this.dialogList = e //list
    },
    upLoadRemove(e){
      this.dialogList = []
      this.filelist = []
    },
    beforeUploadVideo(file){
      const isLt10M = file.size / 1024 / 1024 < 10;
      // video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'
       if (['video/mp4'].indexOf(file.type) == -1) {
           this.$message.error('请上传正确的视频格式');
           return false;
       }
       if (!isLt10M) {
           this.$message.error('上传视频大小不能超过10MB哦!');
           return false;
       }
    },
    dialogAdd(){
      let list = this.dialogList;
      console.log(1234,list)
      let newList = [];
      list.map(item => {
        newList.push({
          videoPicUrl: item.id,
          vedioInfo: '',
          bannerType: 3,
          name: '',
          coverType: 0,
          fullUrl: uploadImgUrl+item.id+".mp4",
          bannerUrl:uploadImgUrl+item.videoPicId
        })
      })
      this.list = [...this.list,...newList];
      this.showDialog = false
    },
  }
};
</script>

<style>
  .header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  .text-input {
    width: 200px;
    display: block;
  }
  .set-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    margin-top: 20px;
  }
  .main-pic {
    width: 66px;
    height: 30px;
    background-color: #2593fc;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    font-size: 12px;
    color: #fff
  }
   .main-pic-not {
     width: 66px;
     height: 30px;
     background-color: #eee;
     line-height: 30px;
     text-align: center;
     border-radius: 5px;
     font-size: 12px;
     color: #333
   }
  .item-select {
    flex: 1;
    margin-left: 10px;
    font-size: 12px;
    display: flex;
  }
  .content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .upload {
    margin-right: 20px;
  }
  .dialog-content {
    display: flex;
    justify-content: center;
  }
  .chose-item {
    position: absolute;
    top:5px;
    right: 5px;
  }
  .checkoed {
    width: 30px;
    height: 30px;
    background-color: #2593fc;
    border-radius: 40px;
    font-size: 20px;
    color: #fff;
    line-height: 30px;
    text-align: center;
  }
  .checkoed-not {
    width: 30px;
    height: 30px;
    background-color: #999;
    border-radius: 40px;
    font-size: 20px;
    color: #fff;
    line-height: 30px;
    text-align: center;
  }
  .save-button {
    margin-top: 20px;
  }
  .title-tips{
    font-weight: 400;
    font-size:20px;
  }
</style>
